<template>
    <div class="header-box">
        <!-- logo -->
        <div class="header-item">
            <h2><a href="/linkstart">次元人</a></h2>
        </div>
        <!-- 导航栏 -->
        <div class="header-item">
            <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
        </div>
        <!-- 搜索 -->
        <div class="header-item" style="width: 30%;">
            <el-form @input="search" @keydown.enter="search">
                <el-autocomplete v-model="form.state" :fetch-suggestions="querySearchAsync" clearable placeholder="搜索"
                    style="width: 100%;" @select="handleSelect" size="large" :prefix-icon="Search" />
            </el-form>
        </div>
        <!-- 背景开关 -->
        <div class="header-item">
            <el-switch v-model="form.valuebg" size="large" inline-prompt />
        </div>
        <n-button text style="font-size: 24px" color="#2E9FEA">
            <el-icon>
                <Flag />
            </el-icon>
        </n-button>
        <n-button text style="font-size: 24px" color="#2E9FEA" @click="this.$router.push('/envelope')">
            <el-icon>
                <Message />
            </el-icon>
        </n-button>
        <!-- 头像 -->
        <div class="header-item">
            <a @click="this.$router.push('/space')" style="cursor: pointer;">
                <n-avatar round :size="60" fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F26%2F20200326100605_SkLVh.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702379201&t=449ae04a921579549f8ed208523c9a62" />
            </a>
        </div>
    </div>
</template>

<script setup>
// 搜索和开关的ico
import { Search } from '@element-plus/icons-vue'

const form = reactive({
    state: '',
    valuebg: true,
})
const activeKey = ref(null);

// 菜单栏
const menuOptions = [
    {
        label: () => h(
            "a",
            {
                href: '/linkstart'
            },
            "首页"
        ),
        key: "linkstart",
    },
    {
        label: () => h(
            "a",
            {
                href: '/fantasyland'
            },
            "动漫"
        ),
        key: "fantasyland",
    },
    {
        label: () => h(
            "a",
            {
                href: '/haven'
            },
            "漫画"
        ),
        key: "haven",
    },
    {
        label: () => h(
            "a",
            {
                href: '/euphoria'
            },
            "游戏"
        ),
        key: "euphoria",
    },
    {
        label: () => h(
            "a",
            {
                href: '/forum'
            },
            "茶话室"
        ),
        key: "forum",
    },
    {
        label: () => h(
            "a",
            {
                href: '/aboutus'
            },
            "关于我们"
        ),
        key: "aboutus",
    },
];

const links = ref([])

const loadAll = () => {
    return [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' },
    ]
}

let timeout
const querySearchAsync = (queryString, cb) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value

    clearTimeout(timeout)
    timeout = setTimeout(() => {
        cb(results)
    }, 1000 * Math.random())
}
const createFilter = (queryString) => {
    return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleSelect = (item) => {
    console.log(item)
}

onMounted(() => {
    links.value = loadAll()
})
// 搜索
const search = () => {
}
</script>

<style scoped>
.header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.header-item {
    float: left;
}
</style>